<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Table</title>
    <script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
    <script src="/js/jqueryui/jquery-ui.js"></script>
    <link href="/js/jqueryui/jquery-ui.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="js/datatables.css">
    <script type="text/javascript" charset="utf8" src="js/datatables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="js/fixedHeader.dataTables.min.css">
    <script type="text/javascript" charset="utf8" src="js/dataTables.fixedHeader.min.js"></script>
    <link rel="stylesheet" type="text/css" href="js/select.dataTables.min.css">
    <script type="text/javascript" charset="utf8" src="js/dataTables.select.min.js"></script>
    <link rel="stylesheet" type="text/css" href="js/buttons.dataTables.min.css">
    <script type="text/javascript" charset="utf8" src="js/dataTables.buttons.min.js"></script>

    <script type="text/javascript">

        function create() {
            //var buttons = $( "#userUpdateDiv" ).dialog( "option", "buttons" );
            var buttons = [
                    {
                        text: "Save",
                        click: function() {
                            doSave();
                        }
                    },
                    {
                        text: "Reset",
                        click: function() {
                            doReset();
                        }
                    },
                    {
                        text: "Cancel",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ];
            $( "#userUpdateDiv" ).dialog( "option", "buttons", buttons);
            $( "#userUpdateDiv" ).dialog( "open" );
        }

        function update(id) {
            var buttons = [
                    {
                        text: "Update",
                        click: function() {
                            doUpdate();
                        }
                    },
                    {
                        text: "Reset",
                        click: function() {
                            doReset();
                        }
                    },
                    {
                        text: "Cancel",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ];
            $( "#userUpdateDiv" ).dialog( "option", "buttons", buttons);
            $('#id').val(id);

            $.ajax({
                url: '/demo/test/' + id,
                type: 'GET',
                dataType: 'json',
                data: {
                },
                beforeSend : function(req) {

                },
                 success:function(data){
                     if(data) {

                         $('#name').val(data.name);
                        $('#birthday').val(data.birthday);
                        $( "#userUpdateDiv" ).dialog( "open" );
                     }
                 },
                 error:function(data){
                        alert("Fail");
                 }
            });



        }

        function del(id) {
            var isDelete = window.confirm("Are you sure to delete this record?");
            if(isDelete) {
                $.ajax({
                    url: '/demo/test/' + id + '/delete',
                    type: 'DELETE',
                    contentType: "application/json",
                    dataType: "text",
                    data: {},
                    beforeSend : function(req) {

                    },
                    success : function(msg){
                        alert(msg);
                        searchData();
                    },
                     error:function(data){
                            alert("Fail");
                     }
                });
            }
        }

        var doReset = () => {
            $('#id').val('');
             $('#name').val('');
             $('#birthday').val('');
        }

        function doUpdate() {

            var id = $('#id').val();
            var name = $('#name').val();
            var birthday = $('#birthday').val();
            if(id === '' || id === null) {
                alert("id is empty");
                return;
            }

            if(name === '' || name === null) {
                alert("name is empty");
                return;
            }
            var userinfo = {
                id,
                name,
                birthday
            };

            $.ajax({
                url: '/demo/test/' + id + '/edit',
                type: 'PUT',
                contentType: "application/json",
                dataType: 'json',
                data: JSON.stringify(userinfo),
                beforeSend : function(req) {

                },
                 success:function(data){
                     alert("Update [" + data.name + "] successfully.");
                       searchData();
                 },
                 error:function(data){
                        alert("Fail");
                 }
            });
        }

        function doSave() {
            var id = $('#id').val();
            var name = $('#name').val();
            var birthday = $('#birthday').val();
            if(id === '' || id === null) {
                alert("id is empty");
                return;
            }

            if(name === '' || name === null) {
                alert("name is empty");
                return;
            }
            var userinfo = {
                id,
                name,
                birthday
            };

            $.ajax({
                url: '/demo/test/new',
                type: 'POST',
                contentType: "application/json",
                dataType: 'json',
                data: JSON.stringify(userinfo),
                beforeSend : function(req) {

                },
                 success:function(data){
                     alert("Create [" + data.name + "] successfully.");
                     $('#id').val('');
                     $('#name').val('');
                     $('#birthday').val('');

                 },
                 error:function(data){
                        alert("Fail");
                 }
            });
        }

        function searchData() {
            var keyword= $('#keyword').val();
             var pageIndex = $('#pageIndex').val();
             var pageSize = $('#pageSize').val();
             var content = $('#content');
             content.html('');
            $.ajax({
                url: '/demo/test/advanceSearch',
                type: 'GET',
                dataType: 'json',
                data: {
                 "keyword": keyword || '',
                 "pageIndex": pageIndex || 1,
                 "pageSize" : pageSize || 10
                },
                beforeSend : function(req) {

                },
                 success:function(data){
                     if(data != undefined && data[0] != undefined) {

                        data.forEach((line, i) => {
                            content.append("<tr>");
                            content.append("<td>" + line.id + "</td>");
                            content.append("<td>" + line.name + "</td>");
                            content.append("<td>" + line.birthday + "</td>");
                            content.append("<td><button onclick='update(" + '"' + line.id + '"'+ ");'>Edit</button></td>");
                            content.append("<td><button onclick='del(" + '"' + line.id + '"'+ ");'>Delete</button></td>");
                            content.append("</tr>");
                        });
                     }

                 },
                 error:function(data){
                        alert("Fail");
                 }
            });
        }
        $(document).ready( function () {
            $( "#userUpdateDiv" ).dialog({
                autoOpen: false,
                width: 600,
                modal: true,
                title: 'User Operation',
                buttons: [
                    {
                        text: "Save",
                        click: function() {
                            doSave();
                        }
                    },
                    {
                        text: "Update",
                        click: function() {
                            doUpdate();
                        }
                    },
                    {
                        text: "Delete",
                        click: function() {
                            doDelete();
                        }
                    },
                    {
                        text: "Reset",
                        click: function() {
                            doReset();
                        }
                    },
                    {
                        text: "Cancel",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $('#userUpdateDiv').hide();
             var keyword= $('#keyword').val();
             var pageIndex = $('#pageIndex').val();
            $.ajax({
                url: '/demo/test/advanceSearch',
                type: 'GET',
                dataType: 'json',
                data: {
                 "keyword": keyword || '',
                 "pageIndex": pageIndex || 1,
                 "pageSize" : 10
                },
                beforeSend : function(req) {

                },
                 success:function(data){
                     if(data != undefined && data[0] != undefined) {
                        var content = $('#content');
                        data.forEach((line, i) => {
                            content.append("<tr>");
                            content.append("<td>" + line.id + "</td>");
                            content.append("<td>" + line.name + "</td>");
                            content.append("<td>" + line.birthday + "</td>");
                            content.append("<td><button onclick='update(" + '"' + line.id + '"'+ ");'>Edit</button></td>");
                            content.append("<td><button onclick='del(" + '"' + line.id + '"'+ ");'>Delete</button></td>");
                            content.append("</tr>");
                        });
                     }

                 },
                 error:function(data){
                        alert("Fail");
                 }
            });
        });
    </script>
    <style type="text/css">
.row {
    border-bottom: 1px red dotted;
    padding: 10px 0px;
}

.lspan {
    font-weight: bold;
    width: 150px;
    display: inline-block;
    margin-left: 10px;
}

#maskDiv {
    position: absolute;
    border: 0px green solid;
    width:100%;
    height: 100%;
    z-index: 30;
    background: rgb(0, 0, 0, 0.2);
    top:0px;
    left: 0px;
    display: none;
}

#maskDivLoading {
    position: absolute;
    border: 0px green solid;
    width:100%;
    height: 100%;
    z-index: 30;
    background: white;
    top:0px;
    left: 0px;
}

.img-stage{
    top: 50%;
    left: 50%;
    position: absolute;
    background:red;
}

#maskDivLoading img {
    top: 50%;
    left: 50%;
    height: 200px;
    width: 200px;
    margin-top : -120px;
    margin-left : -100px;
    position: absolute;
}

.buttonClass {
    border: 1px orange solid;
    background: white;
    color: orange;
    font-size: 16px;
    padding: 6px;
}

</style>
</head>
<body>
<center>
    <table>
        <tr>
            <td>Keyword:</td><td><input id="keyword" type="text" placeholder="Please input a keyword."/></td>
        </tr>
        <tr>
            <td>Page number:</td>
            <td>
            <select id="pageIndex">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>

            </select>
            </td>
        </tr>
        <tr>
            <td>Items per page:</td>
            <td>
                <select id="pageSize">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input id="searchBtn" type="button" value="Search" onclick="searchData();"/>
             &nbsp;
                <input id="createBtn" type="button" value="New" onclick="create();">
            </td>
        </tr>
    </table>
    <h2/>
</center>
<center>

    <table border="1">
        <thead>
        <tr><th>ID</th><th>Name</th><th>Birthday</th><th colspan="2">Operation</th></tr>
        </thead>
        <tbody id="content">

        </tbody>

    </table>
</center>

<div id="userUpdateDiv">
    <div id="messages" class="msg">
        <div id="msgs" style="margin-left: 10px">

        </div>

    </div>
    <div id="row" class="row">
    <span id="lspan" class="lspan">
        ID:
    </span>
        <span id="cspan">
        <input type="text" name="id" id="id"/>
    </span>
    </div>

    <div id="row2" class="row">
    <span id="lspan" class="lspan">
        Name:
    </span>
        <span id="cspan">
        <input type="text" name="name" id="name"/>
    </span>
    </div>

    <div id="row3" class="row">
    <span id="lspan" class="lspan">
        Birthday:
    </span>
        <span id="cspan">
        <input type="text" name="birthday" id="birthday"/>
    </span>
    </div>
    <input type="hidden" id="indexHidden"/>
</div>
</body>
</html>